<template>
  <div>
    <Seletor></Seletor>
    <el-card style="margin: 10px">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="SPU名称:">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="spu品牌:">
          <el-select v-model="form.region">
            <el-option :value="1">1</el-option>
            <el-option :value="2">2</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Spu描述:">
          <textarea
            autosize
            placeholder="请输入内容..."
            style="width: 100%; height: 100px; resize: none"
          ></textarea>
        </el-form-item>
        <el-form-item label="Spu图片">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="销售属性">
          <el-select v-model="form.date1" placeholder="销售属性">
            <el-option :value="3">3</el-option>
            <el-option :value="4">4</el-option>
          </el-select>
        </el-form-item>
        <el-table border style="width: 100%">
          <el-table-column type="index" label="序号" width="180">
          </el-table-column>
          <el-table-column prop="Spuname" label="属性值名" width="180">
          </el-table-column>
          <el-table-column prop="Spunamelist" label="属性值名称列表"> </el-table-column>
          <el-table-column prop="address" label="操作"> 
            <template slot-scope="scope">
                <el-button icon="el-icon-plus" type="primary"></el-button>
                <el-button icon="el-icon-delete" type="danger"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import Seletor from "@/components/Seletor";
export default {
  components: {
    Seletor,
  },
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>


<style scoped></style>